<template>
  <el-container>
    <el-header>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="法律名称">
          <el-input v-model="formInline.lawName" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="条款名称">
          <el-input v-model="formInline.clauseContent" placeholder=""></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </el-header>
    <el-main>
      <el-table style="width: 100%;"
                :data="lawList"
      >
        <el-table-column type="index" width="100%">
        </el-table-column>

        <el-table-column label="法律名称" prop="lawName" width="180">
        </el-table-column>
        <el-table-column label="条款内容" prop="clauseContent" >
        </el-table-column>
        <el-table-column label="生效日期" prop="lawExpiry" width="180">
        </el-table-column>
        <el-table-column label="发布日期" prop="versionDate" width="180">
        </el-table-column>
        <el-table-column label="时效性" prop="versionStatus" width="180">
          <template slot-scope="scope">
            <div v-text="renderStatus(scope.row)"></div>
          </template>
        </el-table-column>

      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="formInline.pageNum"
        :page-sizes="[5, 10, 20, 40]"
        :page-size="formInline.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </el-main>
    <el-footer></el-footer>
  </el-container>
</template>

<script>
import {queryLawPages} from "../api/queryApi"
export default {
  data() {
    return {
      formInline: {
        lawName: '',
        clauseContent: '',
        pageSize:10,
        pageNum:1
      },
      lawList:[],
      total:0,
    }
  },
  created () {
    this.onSubmit();
  },
  methods: {
    onSubmit() {
      queryLawPages(this.formInline).then(result => {
        if(result.data){
            this.lawList=result.data.records;
            this.formInline.pageSize=result.data.size;
            this.formInline.pageNum=result.data.current;
            this.total=result.data.pages;
        }
      })
      console.log('submit!');
    },
    // 初始页currentPage、初始每页数据数pagesize和数据data
    handleSizeChange: function (size) {
      this.formInline.pageSize=size;
      this.onSubmit();  //每页下拉显示数据
    },
    handleCurrentChange: function(currentPage){
      this.formInline.pageNum=currentPage;
      this.onSubmit();  //点击第几页
    },
    renderStatus(row){
      return row.versionStatus=="3"?"尚未生效":(row.versionStatus=="1"?"有效":(row.versionStatus=="5"?"已修改":
        (row.versionStatus=="9"?"已废止":"")))
    }
  }
}
</script>
